<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Animation</title>
    <meta name="description" content="Animation - A-Frame">
    <script src="../../../dist/aframe.js"></script>
  </head>
  <body>
    <a-scene stats>
      <a-assets>
        <a-mixin id="ball" geometry="primitive: sphere; radius:1"  material="shader: flat; color: red">
        </a-mixin>
        <a-mixin id="opacity" attribute="material.opacity" dur="2000" direction="alternate" fill="forwards"
                  ease="linear" repeat="indefinite" from="0.3" to="1.0"><a-mixin>
        <a-mixin id="spin" attribute="rotation" dur="4000"
                 repeat="indefinite" easing="linear" dur="3000" to="0 0 360"><a-mixin>
      </a-assets>

      <a-entity position="0 0 80">
        <a-entity camera look-controls wasd-controls></a-entity>
      </a-entity>

      <a-entity id="fans"></a-entity>
      
    </a-scene>
  </body>
  <script>
    var i;
    var fansEl = document.querySelector('#fans');
    var numRows = 4;
    var numFans = 3
    var numFanRows = 3;
    var numBalls = 11;
    var ball =
      '<a-entity>' +
        '<a-entity mixin="ball">' +
          '<a-animation mixin="opacity"></a-animation>' +
        '</a-entity>' +
      '</a-entity>';
    var ballEl;
    var rowEl;
    var ballInitX = -15;
    var fanInitX = -60;
    var fanInitY = -40;
    var offset;

    for (var n = 0; n < numFanRows; ++n) {
      var fanRow = document.createElement('a-entity');
      fanRow.setAttribute('position', { x: 0, y: fanInitY - (n * fanInitY), z: 0 });
      for (var k = 0; k < numFans; ++k) {
        var fanEl = document.createElement('a-entity');
        fanEl.setAttribute('position', { x: fanInitX - (k * fanInitX), y: 0, z: 0});
        var animationEl = document.createElement('a-animation');
        animationEl.setAttribute('mixin', 'spin');
        fanEl.appendChild(animationEl);
        for (var i = 0; i < numRows; ++i) {
          var rowEl = document.createElement('a-entity');
          rowEl.setAttribute('rotation', { x: 0, y: 0, z: i * (180 / numRows) });
          for (var j = 0; j < numBalls; ++j) {
            offset = ballInitX + 3 * j;
            if (offset === 0) { continue; }
            var ballEl = document.createElement('a-entity');
            ballEl.setAttribute('position', { x: ballInitX + 3 * j, y: 0, z: 0 });
            ballEl.innerHTML = ball;
            animationEl = ballEl.querySelector('a-animation');
            animationEl.setAttribute('begin', Math.random() * 2000);
            rowEl.appendChild(ballEl)
          }
          fanEl.appendChild(rowEl);
        }
        fanRow.appendChild(fanEl);
      }
      fansEl.appendChild(fanRow);
    }
  </script>
</html>
